<template>
	<view class="main">
		<u-navbar
		title=" " 
		:is-back="false"
		title-size="34"
		:border-bottom="false"
		:background="background">
			<view class="header">
				<u-icon name="arrow-left" size="28" @tap="black"></u-icon>
				<view class="title">发布评价</view>
				<view class="ritbtn" @tap="cancel">取消</view>
			</view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="240" :label-style="label_style">
				<u-form-item label="" prop="intro" :border-bottom="false">
					<view class="rate">
						<view class="title">评价:</view>
						<u-rate active-color="#FF6C00" inactive-color="#FF6C00" :count="5" v-model="form.intro"></u-rate>
						<text>4.8</text>
					</view>
				</u-form-item>
				<view class="des_title">评价描述</view>
				<u-form-item label="" prop="intro" :border-bottom="false">
					<u-input v-model="form.intro" type="textarea" placeholder="请对开发者进行评价" />
				</u-form-item>
			</u-form>
			<button class="add-btn" @click="submit">发布</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				label_style:{
					fontSize: '28rpx',
					color: '#333333',
					lineHeight: '40px'
				},
				form: {
					name: '',
					intro: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介不能少于5个字', 
							trigger: 'change'
						}
					]
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 取消
			cancel(){
				
			},
			//返回
			black(){
				uni.navigateBack()
			},
			toPage(url,islogin=false){
				this.more_show = false
				if(islogin){
					uni.navigateTo({
					    url: '/pages/Login/index'
					});
					return
				}
				uni.navigateTo({
				    url: url
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		padding:30rpx;
		background-color: #f9f9f9;
		.header{
			padding: 0 30rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 34rpx;
			.title{
				font-size: 34rpx;
			}
			.ritbtn{
				font-size: 28rpx;
				position: relative;
				z-index: 999999;
			}
		}
		.content{
			.rate{
				width: 100%;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				padding: 28rpx 32rpx;
				border-radius: 8rpx;
				.title{
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					line-height: 32rpx;
					margin-right: 42rpx;
				}
				.u-rate{
					margin-right: 30rpx;
					height: 40rpx;
				}
				.text{
					display: inline-block;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 32rpx;
				}
			}
			.des_title{
				font-size: 28rpx;
				font-weight: 500;
				color: #4C4C4C;
				line-height: 40rpx;
				margin: 30rpx 0 16rpx 30rpx;
			}
			/deep/.u-input__textarea{
				height: 346rpx!important;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 20rpx;
			}
			.add-btn{
				margin-top: 60rpx;
				height: 100rpx;
				background: #4A90E2;
				border-radius: 50rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 100rpx;
				&::after{
					border: 0;
				}
			}
		}


		
	}
</style>
